<template>
  <div class="friend-wrapper">
    <div class="search-box">
      <input placeholder="搜索" v-model="searchFriendText" @input="searchFriend" type="text" />
    </div>
    <div class="item" :data-index="index" :data-name="friend.username" v-for="(friend,index) in localFriendList" :key="friend.id" @click="chat(friend,index)">
      <div class="photo">
        <img v-if="friend.photo" :src="friend.photo" />
      </div>
      <div class="info">
        <div class="username">{{friend.username}}</div>
        <div class="msgcount" :data-id="friend.id"></div>
        <div :class="['state', parseInt(friend.online) === 1? 'online':'']"></div>
      </div>
    </div>
  </div>
</template>

<script>
/*
friendList
=> {
  online: 0 | 1 0 不在线 1在线
  photo: 头像
  username: 用户名
  id: 用户id 用于聊天
  msgcount: 未读消息数
}

*/


// 好友列表
export default {
  name: 'Friend',
  props: {
    friendList: {
      type: Array,
      default: () => []
    },
    msgCountObj: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      searchFriendText: '',
      localFriendList: [],
      oldFriendList: [],
      curActiveFriend: null
    }
  },
  watch: {
    friendList(newVal) {
      this.localFriendList = newVal;
      this.oldFriendList = newVal;
    },
    msgCountObj: {
      handler(newVal) {
        const ids = Object.keys(newVal);
        Array.from(document.getElementsByClassName('msgcount')).forEach(item => {
          if (ids.includes(item.dataset.id)) {
            if (parseInt(newVal[item.dataset.id]) === 0) {
              item.style.visibility = 'hidden';
            } else {
              item.style.visibility = 'visible';
            }
            if (parseInt(newVal[item.dataset.id]) < 100) {
              item.innerHTML = newVal[item.dataset.id];
            } else {
              item.innerHTML = '99+'
            }
          } else {
            item.style.visibility = 'hidden';
            item.innerHTML = '0';
          }
        })
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {
    window.addEventListener('keydown', (ev) => {
      if ([38, 40].includes(parseInt(ev.keyCode))) {
        this.curActiveFriend = document.getElementsByClassName('active')[0];
      }
      if (this.curActiveFriend) {
        switch (parseInt(ev.keyCode)) {
          case 38:// up
            if (parseInt(this.curActiveFriend.dataset.index) === 0) {
              // 重置为 最后一个 this.localFriendList.length - 1
              this.handlerItemClick(this.localFriendList.length - 1)
            } else {
              // 当前index -1
              this.handlerItemClick(parseInt(this.curActiveFriend.dataset.index) - 1)
            }
            break;
          case 40:// down
            if (this.localFriendList.length - 1 === parseInt(this.curActiveFriend.dataset.index)) {
              // 重置为 1
              this.handlerItemClick(0)
            } else {
              // 当前index +1
              this.handlerItemClick(parseInt(this.curActiveFriend.dataset.index) + 1);
            }
            break;
        }
      }

    })
  },
  methods: {
    handlerItemClick(index) {
      Array.from(document.getElementsByClassName('item')).forEach(item => {
        if (parseInt(item.dataset.index) === index) {
          item.className += ' active';
          this.chat(this.localFriendList[item.dataset.index], item.dataset.index);
        } else {
          item.className = 'item';
        }
      })
    },
    chat(friend, index) {
      this.$emit('clearMsgCount', friend.id);
      Array.from(document.getElementsByClassName('item')).forEach(item => {
        item.className = 'item';
      })
      document.getElementsByClassName('item')[index].className = 'item active';
      let datasetIndex = document.getElementsByClassName('item')[index].dataset.index;
      this.$emit('chat', friend);
      this.curChatFriend = {
        friend,
        index: datasetIndex,
      };
    },
    searchFriend() {
      if (this.searchFriendText) {
        this.localFriendList = this.localFriendList.filter(friend => {
          return friend.username.includes(this.searchFriendText);
        })
      } else {
        this.localFriendList = this.oldFriendList;
      }
      if (this.localFriendList.length === 1) {
        const friend = this.localFriendList[0];
        setTimeout(() => {
          Array.from(document.getElementsByClassName('item')).forEach(item => {
            if (item.dataset.name.trim() === friend.username) {
              item.className = 'item active';
              this.chat(friend, parseInt(item.dataset.index));
            } else {
              item.className = 'item';
            }
          })
        }, 100);
      }

    }
  }
}
</script>

<style scoped>
.friend-wrapper {
  width: 20%;
  min-width: 200px;
  height: 100%;
  background-color: rgb(0, 0, 0);
}

/* 个人信息 */
.search-box {
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: rgb(0, 0, 0);
  border-bottom: 1px solid #ccc;
}

.search-box input {
  outline: none;
  border: none;
  width: 80%;
  height: 80%;
  text-indent: 10px;
}

.item {
  display: flex;
  width: 100%;
  height: 60px;
  line-height: 60px;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
  padding: 0 5px;
}

.item.active {
  background-color: #ffffff;
}

.item.active .username {
  color: #000000;
}

.photo {
  min-width: 40px;
  min-height: 40px;
  max-width: 40px;
  max-height: 40px;
  border-radius: 50%;
  margin-right: 5px;
  border: 1px solid #ccc;
  margin-top: 10px;
  overflow: hidden;
}

.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.info {
  display: flex;
  flex: 1;
  align-items: center;
}

.msgcount {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 20px;
  color: #ffffff;
  background-color: red;
  border-radius: 10px;
  font-size: 12px;
  margin-right: 10px;
  visibility: hidden;
}

.username {
  flex: 1;
  text-align: left;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.state {
  width: 10px;
  height: 10px;
  background-color: grey;
  border-radius: 50%;
}

.state.online {
  background-color: green;
  box-shadow: 0 0 5px 2px green;
}
</style>